<template>
  <div>
    <Row :gutter="10">
      <Col span="6">
        <Card :padding="4">
          <div class="scroll-container">
            <scroll-bar
              scroll-y-type="inner"
            >
              <p v-for="i in 100" :key="`item-${i}`">item - {{ i }}</p>
            </scroll-bar>
          </div>
        </Card>
      </Col>
      <Col span="6">
        <Card :padding="4">
          <div class="scroll-container">
            <scroll-bar>
              <p class="list-item" v-for="i in 6" :key="`item-${i}`">item - {{ i }} - item-long-show-x-scrollbar- long-text-make-scroller-x-show-and-useable - item-long-show-x-scrollbar</p>
            </scroll-bar>
          </div>
        </Card>
      </Col>
      <Col span="6">
        <Card :padding="4">
          <div class="scroll-container">
            <scroll-bar show-all>
              <p v-for="i in 100" :key="`item-${i}`">item - {{ i }}</p>
            </scroll-bar>
          </div>
        </Card>
      </Col>
      <Col span="6">
        <Card :padding="4">
          <div class="scroll-container">
            <scroll-bar show-all>
              <p class="list-item" v-for="i in 6" :key="`item-${i}`">item - {{ i }} - item-long-show-x-scrollbar- long-text-make-scroller-x-show-and-useable - item-long-show-x-scrollbar</p>
            </scroll-bar>
          </div>
        </Card>
      </Col>
    </Row>
    <Row :style="{marginTop: '10px'}" :gutter="10">
      <Col span="6">
        <Card :padding="4">
          <div class="scroll-container">
            <scroll-bar show-all dis-scroll-x>
              <p class="list-item" v-for="i in 100" :key="`item-${i}`">item - {{ i }} - item-long-show-x-scrollbar- long-text-make-scroller-x-show-and-useable - item-long-show-x-scrollbar</p>
            </scroll-bar>
          </div>
        </Card>
      </Col>
      <Col span="6">
        <Card :padding="4">
          <div class="scroll-container">
            <scroll-bar show-all dis-scroll-y>
              <p class="list-item" v-for="i in 100" :key="`item-${i}`">item - {{ i }} - item-long-show-x-scrollbar- long-text-make-scroller-x-show-and-useable - item-long-show-x-scrollbar</p>
            </scroll-bar>
          </div>
        </Card>
      </Col>
      <Col span="6">
        <Card :padding="4">
          <div class="scroll-container">
            <scroll-bar show-all scroll-x="none">
              <p class="list-item" v-for="i in 100" :key="`item-${i}`">item - {{ i }} - item-long-show-x-scrollbar- long-text-make-scroller-x-show-and-useable - item-long-show-x-scrollbar</p>
            </scroll-bar>
          </div>
        </Card>
      </Col>
      <Col span="6">
        <Card :padding="4">
          <div class="scroll-container">
            <scroll-bar>
              <p class="list-item" v-for="i in 100" :key="`item-${i}`">item - {{ i }} - item-long-show-x-scrollbar- long-text-make-scroller-x-show-and-useable - item-long-show-x-scrollbar</p>
            </scroll-bar>
          </div>
        </Card>
      </Col>
    </Row>
  </div>
</template>

<script>
import scrollBar from './vue-scroller-bars';
export default {
  name: 'scroll-bar-page',
  components: {
    scrollBar
  }
};
</script>

<style lang="less">
  .scroll-container{
    height: 260px;
  }
  .list-item{
    word-break: keep-all;
    white-space: nowrap;
  }
</style>
